(function() {
    function Yunxidahui() {
        this.dataStore = {
            scrollBarLength: 6,
            btn1: 1,
            btn2: 1,
            btn3: 0
        }
        this.myChart;
    }
    /*初始化*/
    Yunxidahui.prototype.init = function() {
        this.creatEchart();
        this.dargProcess();
        this.clickButton();
    }
    /*创建echarts*/
    Yunxidahui.prototype.creatEchart = function() {
        var _this = this;
        require.config({
            paths: {
                echarts: '../bgAll/js/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/radar' // 使用柱状图就加载bar模块，按需加载
            ],
            DrawEChart
        );

        //创建ECharts图表方法
        function DrawEChart(ec) {
            // 基于准备好的dom，初始化echarts图表
            _this.myChart = ec.init(document.getElementById('main'));
            /*var effect = {
                show: true,
                scaleSize: require('zrender/tool/env').canvasSupported ? 1 : 2,
                period: 60, // 运动周期，无单位，值越大越慢
                color: '#fff',
                shadowColor: 'rgba(220,220,220,0.4)',
                shadowBlur: 4
            };*/
            option = {
                polar: [{
                    indicator: [{
                        text: '流量分发',
                        max: 40
                    }, {
                        text: '价格',
                        max: 40
                    }, {
                        text: '安全防护',
                        max: 40
                    }, {
                        text: '异地灾备',
                        max: 40
                    }, {
                        text: '同城容灾',
                        max: 40
                    }, {
                        text: '高可用',
                        max: 40
                    }],
                    name: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#ecf1ff',
                            fontSize: 15
                        },

                    },
                    splitNumber: 4,
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            width: 2,
                            color: '#515f84'
                        }
                    },
                    axisLine: { // 坐标轴线
                        show: true, // 默认显示，属性show控制显示与否
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: '#6b7bb5',
                            width: 3,
                            type: 'solid'
                        }
                    },
                    radius: 160
                }],
                series: [{
                    type: 'radar',
                    itemStyle: {
                        normal: {
                            color: 'rgba(51,63,158,0.15)',
                            areaStyle: {
                                type: 'default'
                            },
                            borderColor: "rgba(51,63,158,0.15)"//顶点的颜色
                        }
                    },
                    data: [{
                        value: [24, 24, 40, 40, 10, 32] //设定六象限图默认值
                    }],
                }]

            };
            // 为echarts对象加载数据 
            _this.myChart.setOption(option);
        }
    }
    /*更新echarts*/
    Yunxidahui.prototype.updataEcharts = function() {
        var scrollBarLength = this.dataStore.scrollBarLength,
            btn1 = this.dataStore.btn1,
            btn2 = this.dataStore.btn2,
            btn3 = this.dataStore.btn3;
        /*更新数据*/
        this.myChart._option.series[0].data[0].value = [scrollBarLength * 4, 10 + scrollBarLength + (btn1 + btn2 + btn3) * 4, 10 + btn1 * 30, 10 + btn2 * 30, 10 + btn3 * 30, 20 + scrollBarLength * 2];
        /*更新图*/
        this.myChart.refresh();
    }
    /*绑定拖拽进度条*/
    Yunxidahui.prototype.dargProcess = function() {
        var _this = this;
        var scrollBarLength = this.dataStore.scrollBarLength,
            btn1 = this.dataStore.btn1,
            btn2 = this.dataStore.btn2,
            btn3 = this.dataStore.btn3;

        
        $bg = $('#bg'),
            $bgcolor = $('#bgcolor'),
            $btn = $('#bt'),
            $text = $('#text'),
            statu = false,
            ox = 0,
            lx = 0,
            left = 174,
            bgleft = 0;
        $btn.mousedown(function(e) {
            lx = $btn.offset().left;
            ox = e.pageX - left;
            statu = true;
        });
        $(document).mouseup(function() {
            statu = false;
        });
        $('#box').mousemove(function(e) {
            if (statu) {
                left = e.pageX - ox;
                if (left < 0) {
                    left = 0;
                }
                if (left > 290) {
                    left = 290;
                }
                $btn.css('left', left - 10);
                $('#bgcolor').width(left);
                $text.html('位置:' + parseInt(left / 2.9) + '%');
                /*更新进度条的值*/
                _this.dataStore.scrollBarLength = Math.round(parseInt(left / 2.9) / 10);
                /*注入数据并更新视图*/
                _this.updataEcharts(scrollBarLength, btn1, btn2, btn3);
            }
        });
    }
    /*绑定点击按钮*/
    Yunxidahui.prototype.clickButton = function() {
        var _this = this;
        var scrollBarLength = this.dataStore.scrollBarLength,
            btn1 = this.dataStore.btn1,
            btn2 = this.dataStore.btn2,
            btn3 = this.dataStore.btn3;
        $('.slb-span').on('click', function(e) {
            var $turn = $(e.currentTarget);
            /*保存按钮代表值*/
            if ($turn.hasClass('btn1')) {
                _this.dataStore.btn1 = (_this.dataStore.btn1 - 1) * (-1);
            } else if ($turn.hasClass('btn2')) {
                _this.dataStore.btn2 = (_this.dataStore.btn2 - 1) * (-1);
            } else {
                _this.dataStore.btn3 = (_this.dataStore.btn3 - 1) * (-1);
            }
            if ($turn.hasClass('off')) {
                $turn.removeClass('off');
            } else {
                $turn.addClass('off');
            }
            /*注入新数据并更新视图*/
            _this.updataEcharts(scrollBarLength, btn1, btn2, btn3);
        });
    }
    var yunxi = new Yunxidahui();
    yunxi.init();
})();
